<template>
  <div class="components-showcase">
    <!-- 标题区 -->
    <h2 class="showcase-title">组件展示中心</h2>

    <!-- 组件展示容器 -->
    <div class="components-container">
      <!-- 每个子组件独立卡片 -->
      <div class="component-card">
        <h3 class="component-title">按钮组件(elButtonPlus)</h3>
        <el-button-demo></el-button-demo>
      </div>
      <!-- 后续添加更多组件卡片 -->
      <div class="component-card">
        <h3 class="component-title">链接组件(elLinkPlus)</h3>
        <el-link-demo></el-link-demo>
      </div>
    </div>
  </div>
</template>

<script>
import ElButtonDemo from "@/components/button/elButtonDemo.vue";
import ElLinkDemo from "@/components/link/elLinkDemo.vue";

export default {
  components: {
    ElLinkDemo,
    ElButtonDemo,
  },
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.components-showcase {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.showcase-title {
  color: #2c3e50;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}

.components-container {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 控制卡片间距 */
  margin-top: 20px;
}

.component-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.2s;
}

.component-card:hover {
  transform: translateY(-3px);
}

.component-title {
  color: #34495e;
  margin-bottom: 15px;
  font-size: 1.1em;
}

</style>